<template>
  <div class="login">
    <el-card>
      <el-form
        :model="loginReq"
        style="width: 420px"
        v-loading.fullscreen.lock="loading"
        element-loading-background="rgba(122, 122, 122, 0.6)"
      >
        <el-form-item label="账号">
          <el-input v-model="loginReq.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginReq.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="less" scoped>
.login {
  padding: 120px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<script setup lang="ts">
import { ref } from 'vue'
import { backendService, ResponseCode } from '@/service/BackendService'
import { useAuthorizationStore } from '@/service/AuthorizationService'
import router from '@/router'

const loading = ref(false)

const loginReq = ref({
  username: undefined,
  password: undefined
})

const login = () => {
  loading.value = true
  backendService
    .post('/api/login', loginReq.value)
    .then((response) => {
      let data = response.data
      if (data.code === ResponseCode.OK) {
        useAuthorizationStore().signIn(data.data.token)
        router.push({ path: '/' })
      }
    })
    .catch((error: any) => {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
        dangerouslyUseHTMLString: true
      })
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
